import React, { useCallback, useState, useEffect } from "react";
import { toopTipStyle } from "@/utils/echarts";
import styles from "./treemap.less";
import * as cn from "classnames";
import useIoObserve from '@/hook/useIoObserve'
import * as echarts from "echarts";

interface DataProps {
  name: string;
  value: number;
}

interface Props {
  idName?: string;
  data: Array<DataProps>;
  propStyles?: any;
  style?: any;
  title?: string;
  className?: string;
}

let timer: any = null;
let isObserve = false

const LEGEND_COLOR_INNER = [
  "#4FADE1",
  "#4464C8",
  "#29AE8E",
  "#ABB8C8",
  "#FDC071",
  "#8DB198",
  "#33427E",
  "#A1654C",
  "#E96946",
  "#988DB1",
  "#97B425",
  "#864CA1",
  "#5182CE",
  "#903434",
  "#7F8C9D",
  "#F69173",
  "#76CCD4",
  "#EB9C3D",
];

const TreeMap = (props: Props) => {
  const { idName, data, className, propStyles, style, title ,percent} = props;

  const getOptions = () => {
    let options = {
      color: LEGEND_COLOR_INNER,
      
      tooltip: {
        ...toopTipStyle(),
        trigger: undefined,
        formatter:'{b0}   {c0}%'
      },
      width:"100%",
      series: [
        {
          type: "treemap",
          // itemStyle:{
          //   opacity:0
          // },
          data,
          nodeClick: false,
          width: "100%",
          height: "100%",
          roam: false,
          visibleMin: 50,
          breadcrumb: {
            show: false,
          },
          color: LEGEND_COLOR_INNER,
          // opacity:0,
          label: {
            padding: 0,
            overflow:'truncate',
            textShadowColor:'rgba(49,49,49,0.30)',
            textShadowOffsetX:0,
            textShadowOffsetY:0,
            textShadowBlur:6,
            fontWeight:'bold'

            // textBorderWidth:1,
            // textBorderColor:"#2C394D"
          },
          // itemStyle:{
          //   // opacity:0.6
            
          // }
        },
      ],
    };
    return options;
  };

  const handleGenLine = () => {
    const dom = document.getElementById(idName);
    if (className) {
      const dom = document.getElementsByClassName(className);
      Array.from(dom).map((d) => {
        const myChart = echarts.init(d);
        d?.removeAttribute("_echarts_instance_");
        myChart.setOption(getOptions());
      });
    } else {
      const myChart = echarts.init(dom);
      dom?.removeAttribute("_echarts_instance_");
      myChart.setOption(getOptions());
    }
  };

  // 窗口大小改变
  const handleChangeSize = () => {
    console.log('isObserve',isObserve)
    if(!isObserve) return
    setTimeout(() => {
      const dom = document.getElementById(idName);
      if (className) {
        const dom = document.getElementsByClassName(className);
        Array.from(dom).map((d) => {
          d?.removeAttribute("_echarts_instance_");
        });
        handleGenLine();
        return;
      }
      dom?.removeAttribute("_echarts_instance_");
      handleGenLine();
    }, 100);
  };
  isObserve = useIoObserve(null, handleChangeSize, idName)

  useEffect(() => {
    console.log('data',data)
    if (data?.length > 0) {
      handleGenLine();
      window.addEventListener("resize", handleChangeSize);
      return () => {
        window.removeEventListener("resize", handleChangeSize);
      };
    }
  }, [JSON.stringify(data), idName]);

  return (
    <div
      className={cn(styles.treemap, !title && styles.emptyTitle)}
      style={style}
    >
     <div style={{width:'100%',height:'100%',background:'#fff'}}>
      <p className={styles.treemap_title}>{title}</p>
        <div
          id={idName}
          className={className}
          style={
            propStyles
              ? propStyles
              : { height: title ? "calc(100% - 20px)" : "100%", width: "100%" }
          }
        ></div>
     </div>
    </div>
  );
};

export default TreeMap;
